/*
 * @Description: 
 * @Author: 邢
 * @Date: 2021-04-23 15:03:27
 * @LastEditTime: 2021-05-05 14:27:00
 * @LastEditors: 邢
 */
import React, { useEffect, useState } from 'react';
import { useHistory, useLocation } from "umi"
import { observer } from "mobx-react-lite"
import useStore from "@/context/useStore"
//less
import styles from "./cooranText.less"
//引入制作时间的方法
import { timeAgo, chinaTime } from "@/utils/timemade/time"
//editor
import Editor from 'for-editor'
import { Affix } from 'antd';
//ts
import { Iallbooks } from "@/utils/interface/cooran"
//antd-progress
import { Progress } from 'antd';
//components
import Side from "@/component/Side/side"
import Lmezt from '@/component/Lsel/Lmezt';
import HeightLight from "@/component/hightlight/hightlight"


interface Iprops {
    match: any
}

function CooranText(props: Iprops) {
    const history = useHistory()
    const { cooran } = useStore()
    const [Ids, setIds] = useState<string>('')

    useEffect(() => {
        //获取具体内容
        setIds(props.match.params.ids)
        cooran.getBookText(props.match.params.ids)
        cooran.getLikes(props.match.params.ids)
    }, [])
    useEffect(() => {
        //获取具体内容
        if (Ids) {
            cooran.getBookText(Ids)
            cooran.getLikes(Ids)
        }
    }, [Ids])


    const [top, setTop] = useState(10);
    const setlike = (id: string, type: string) => {
        cooran.setLikes(id, type)
    }

    return (
        <div className={styles.text}>
            <p><span onClick={() => history.go(-2)}>知识笔记</span>/{cooran.bookItem && <span onClick={() => history.push({ pathname: `/index/coorandetail/${props.match.params.id}` })}>{cooran.bookItem.title}</span>}/{cooran.bookText && <span>{cooran.bookText.title}</span>}</p>
            <Side con={cooran.liks} setLike={(id, type) => setlike(id, type)}></Side>
            <div className={styles.con}>
                {
                    cooran.bookText && <div className={styles.left}>
                        <p>{cooran.bookText.title}</p>
                        <p>发布于{chinaTime((cooran.bookText.publishAt as string))}·阅读量{cooran.bookText.views}</p>
                        {/* 文本内容 */}
                        <HeightLight str={cooran.bookText.html||cooran.bookText.content}></HeightLight>
                        <div>
                            <p style={{textAlign:"center",margin:"20px 0 0"}}>评论</p>
                            <Lmezt></Lmezt>
                        </div>
                </div>}
                <Affix offsetTop={top}>
                    <div className={styles.right}>
                        {
                            cooran.bookItem && cooran.bookItem.children && <div>
                                <div className={styles.tit}>
                                    <p>{cooran.bookItem.title}</p>
                                    <div>
                                        {
                                            cooran.bookItem.children.map((item: Iallbooks) => {
                                                return <li key={item.id} className={Ids == item.id ? styles.active : ""} onClick={() => setIds(item.id)}>
                                                    {item.title}
                                                </li>
                                            })
                                        }
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </Affix>
            </div>
        </div>
    )
}
export default observer(CooranText)
